<template>
  <div class="box">
      <MyMtHeader titleText="地址编辑"/>
      <div class="main">
        <mt-field label="姓名" placeholder="收货人姓名" v-model="info.username"></mt-field>
        <mt-field label="电话" placeholder="收货人手机号" type="email" v-model="info.phone"></mt-field>
        <mt-field @click.native="show=true" label="地址" placeholder="选择省/市/区" v-model="info.province"></mt-field>
        <mt-field label="详细地址" placeholder="街道门牌、楼层房间号等信息" type="tel" v-model="info.address"></mt-field>
      </div>
      <div class="footer">
            <mt-button @click="preserveInfo" type="danger">保存</mt-button>
            <mt-button @click="clearInfo" type="default">删除</mt-button>
      </div>

        <van-overlay :show="show" @focus="show = false">
            <div class="wrapper" @click.stop>
                <van-picker show-toolbar   @cancel="onCancel"  @confirm="onConfirm" :columns="columns" />
            </div>
        </van-overlay>
  </div>
</template>

<script>
import { MessageBox,Toast  } from 'mint-ui';
import MyMtHeader from '../MyMtHeader/MyMtHeader.vue'
export default {
    components: { MyMtHeader },
    data(){
        return {
            info:{
                username:'',
                phone:'',
                province:'',
                address:'',
            },
            show:false,
            columns: [
                {
                    text: '浙江',
                    children: [
                        {
                        text: '杭州',
                        children: [{ text: '西湖区' }, { text: '余杭区' }],
                        },
                        {
                        text: '温州',
                        children: [{ text: '鹿城区' }, { text: '瓯海区' }],
                    }],
                },
                {
                    text: '浙江',
                    children: [
                        {
                        text: '杭州',
                        children: [{ text: '西湖区' }, { text: '余杭区' }],
                        },
                        {
                        text: '温州',
                        children: [{ text: '鹿城区' }, { text: '瓯海区' }],
                    }],
                },
                {
                    text: '浙江',
                    children: [
                        {
                        text: '杭州',
                        children: [{ text: '西湖区' }, { text: '余杭区' }],
                        },
                        {
                        text: '温州',
                        children: [{ text: '鹿城区' }, { text: '瓯海区' }],
                    }],
                }
            ],
            infoNew:{
                username:'',
                phone:'',
                province:'',
                address:''
            },
            addInfoFlag:false
        }
    },
    methods: {
        onConfirm(value){
            let str = ''
            value.forEach(item => {
                str += item + '/'
            });            
            this.info.province = str.slice(0,str.length-1)
            this.show = false
        },
        onCancel(){
            this.show = false
        },
        clearInfo(){
            this.addInfoFlag = false
            MessageBox.confirm('确认删除?')
            .then(value=>{
                this.$router.push('/personal/concat')
            })
        },
        preserveInfo(){
            let {username,phone,province,address} = this.info
            if ( ! (username && phone && province && address) ){
                Toast({
                    message: '输入框内容不能为空',
                    duration: 500
                });
                return
            }
            if ( ! /^1[0-9]{10}$/.test(phone) ){
                Toast({
                    message: '请输入正确的手机号',
                    duration: 500
                });
                return
            }
            this.addInfoFlag = true
            this.infoNew = { username,phone,province,address }
            Toast({
                message:'添加成功!',
                duration:1000
            })
            this.$router.push('/personal/concat')
        }
    },
    destroyed(){
        if (this.addInfoFlag){
            this.$EventBus.$emit('addInfo',(this.infoNew))
        }
        this.infoNew = {}
    }

}
</script>

<style scoped>
.box{
    position: relative;
    background: #e7e8e861;
    height: 100vh;
}
.main >>> .mint-cell-wrapper{
    font-size: 14px;
}
.van-picker{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}
.footer{
    margin: 10px;
}
.footer .mint-button{
    width: 100%;
}
</style>